<script lang="ts" setup>
import { ref } from 'vue'
// 订单列表组件
import OrderList from './components/order_list.vue'

// 标签索引值
const tabIndex = ref(0)

// 标签页数据
const orderTabs = ref<{ label: string; rendered: boolean }[]>([
  { label: '问医生', rendered: true },
  { label: '极速问诊', rendered: false },
  { label: '开药问诊', rendered: false },
])
// 标签页切换
const handleChange = (index: number) => {
  tabIndex.value = index
  // 是否渲染当前标签页
  orderTabs.value[index].rendered = true
}
</script>

<template>
  <view class="consult-page">
    <view class="consult-status-tabs">
      <custom-tab :data="orderTabs" @change="handleChange"></custom-tab>
    </view>

    <!-- 订单列表 -->
    <!-- 使用v-for渲染订单列表 v-show来控制是否显示 -->
    <template v-for="(tab, index) in orderTabs" :key="index">
      <OrderList v-show="tabIndex === index" v-if="tab.rendered" :type="index + 1" />
    </template>
  </view>
</template>

<style lang="scss"></style>
